
import type { CSSProperties } from 'react'
import { ErrorBlock, List, Tag } from '@/components/base'
import { Typography } from '@/components/typography'
import { Flex } from '@/components/flex'
import { List as VirtualizedList, AutoSizer } from 'react-virtualized'
import { useElementResize } from '@/utils/hooks'
import { CalendarOutlined } from '@ant-design/icons'
import styles from './index.module.less';
import { useNavigate } from 'react-router-dom'
import React from 'react'
import { PageController } from '../../page-controller'
import { useObserver } from 'mobx-react-lite'
import * as pages from '@/pages'
import { Controller } from '@/views/basic-layout/controller'

const { Text } = Typography

export function CustomerList() {

    const controller = React.useContext(Controller.Context);
    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);
    const { onRef, height } = useElementResize<HTMLDivElement>();
    const navigator = useNavigate();

    const rowRenderer = React.useCallback(function ({
        index,
        key,
        style,
    }: {
        index: number
        key: string
        style: CSSProperties
    }) {
        const item = data[index];
        return (
            <List.Item
                key={key}
                style={style}
                className={styles['customer-list-item']}
                description={<Text ellipsis={1} size={12} type='secondary'><CalendarOutlined style={{ marginRight: 4 }} />最近入店时间：2023-10-01</Text>}
                onClick={() => {
                    controller.removeTab(pages.customerDetail.name);
                    navigator(`/${pages.customerDetail.name}?id=${item.id}`)
                }}
            >
                <Flex vertical style={{ width: '100%' }} >
                    <Flex align='flex-end' style={{ width: '100%' }} gap={4} >
                        <Text ellipsis={1} size={16} strong>{item?.name}</Text>
                        <Text ellipsis={1} size={12} type='secondary' >{item?.phone || '--'}</Text>
                        <div style={{ flex: 1 }} />
                        <Tag color='#87d068'>活跃</Tag>
                    </Flex>

                    <Flex gap={8} style={{ paddingBottom: 4 }} align='center'>
                        <Tag round color='#bbb' fill='outline' style={{ color: '#000' }} >基础护理套 • 12次</Tag>
                        <Tag round color='#bbb' fill='outline' style={{ color: '#000' }} >头皮护理套 • 9次</Tag>
                        <Text strong size={12} >...</Text>
                    </Flex>
                </Flex>
            </List.Item>
        )
    }, [controller, data, navigator])

    // 更精确的滚动到底部检测
    const handleScroll = React.useCallback(({ clientHeight, scrollHeight, scrollTop }: {
        clientHeight: number;
        scrollHeight: number;
        scrollTop: number;
    }) => {
        // 当滚动条差10像素到底部的时候
        if (scrollHeight - scrollTop - clientHeight < 10) {
            pageController.page++;
            pageController.query();
        }
    }, [pageController]);

    if (data.length === 0) {
        return <ErrorBlock status='empty' title='暂无数据' description='点击右上角新建客户' />
    }

    return (
        <div ref={onRef} style={{ flex: 1, overflow: 'hidden' }} >
            <List style={{ height: '100%' }} >
                <AutoSizer disableHeight>
                    {({ width }: { width: number }) => (
                        <VirtualizedList
                            rowCount={data.length}
                            rowRenderer={rowRenderer}
                            width={width}
                            height={height}
                            rowHeight={86}
                            overscanRowCount={10}
                            onScroll={handleScroll}
                            scrollToAlignment="start" // 可选：控制滚动对齐方式
                        />
                    )}
                </AutoSizer>
            </List>
        </div>
    )
}

